<template>
    <fieldset>
        <legend>动态组件</legend>
        <!-- <component :is="cname">展示</component> -->
        <button @click="handleClick(item)" :class="['tab-button',{active:active==item.tag}]" v-for="item in tabs"
                :key="item.tag">{{ item.ch }}
        </button>
        <component :is="active"></component>
    </fieldset>
</template>
<script>

//is属性后面跟上组件的名字

//vue2中可以在任意元素上加上is属性,vue2中可以使用component标签,并且可以加上is属性

//vue3只能在component这个元素上加上is属性

//引入组件

import friends from "./friends.vue"

import toplist from "./toplist"

import playlist from "./playlist"

// vue里面的动态组件通过 is属性来进行切换 
export default {
    mounted() {
        console.log('tab组件的moutned被触发了')
    },
    data() {
        return {
            //声明一个三方变量
            active: "friends",
            cname: 'toplist',
            tabs: [{
                tag: 'friends',
                ch: '朋友'
            },
                {
                    tag: 'toplist',
                    ch: '排行榜'
                }, {
                    tag: 'playlist',
                    ch: '歌单'
                }]
        }
    },
    methods: {
        handleClick(data) {
            console.log(data) //{tag: 'playlist', ch: '歌单'}
            this.active = data.tag
            //这一步的目的就是 
            // console.log(this.active)
        }
    },
    components: {
        friends,
        toplist,
        playlist
    }
}
</script>
<style scoped>
.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}

.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: hotpink;
}

.tab {
    border: 1px solid #ccc;
    padding: 10px;
}

h1 {
    margin: 0;
}
</style>